// import logo from './logo.svg';
import './App.css'
import { unstable_HistoryRouter as HistoryRouter, Route, Routes } from 'react-router-dom'
import { history } from './utils/history'
// import GeekLayout from './pages/Layout/index'
// // import Login from './pages/Login'
// import Login from '@/pages/Login'
import { AuthComponent } from '@/components/AuthComponent'
// import Home from './pages/Home'
// import Article from './pages/Article'
// import Publish from './pages/Publish'
// 导入必要组件
import { lazy, Suspense } from 'react'
// 按需导入路由组件
const Login = lazy(() => import('./pages/Login'))
const GeekLayout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))

function App () {
  return (
    <HistoryRouter history={history}>
      <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }
      >
        <div className="App">
          <Routes>
            {/* layout需要鉴权处理，这里的Layout不一定不能写死 要根据是否登录 */}
            <Route path='/' element={
              <AuthComponent><GeekLayout /></AuthComponent>}>
              {/* 二级路由默认页面 */}
              <Route index element={<Home />} />
              <Route path="article" element={<Article />} />
              <Route path="publish" element={<Publish />} />
            </Route>
            <Route path='/login' element={<Login />}></Route>
          </Routes>
        </div>
      </Suspense>
    </HistoryRouter>
  )
}

export default App
